<template>
  <!-- 人脸信息查看页 -->
  <div style="height:100%">
    <navbar :title="$t('facial_information_collection')" :backCallback="backHome"></navbar>
    <div class="content">
      <div style="padding: 20px;">
        <v-alert type="info" show-icon>
          <van-icon name="info-o" slot="icon"/>
          <template slot>
            <p> {{ $t('face_tips1') }} </p>
          </template>
        </v-alert>
      </div>
      <div style="padding-top:60px;margin: auto;" class="prize_box_img">
        <van-image width="220px" height="280px" style="margin-top:30px" :src="appUrl + faceDetail.ufgPath" :error-icon="avatarPng"  :icon-size="'128px'" />
      </div>
      <div style="width:220px;margin: auto;line-height: 2;margin-top:50px" v-if="faceDetail.ufgApprovalStatus">
        <p :style="{'color':faceDetail.ufgApprovalStatus==='APPROVED'?'#73B708':'#DA051F'}">{{$t('audit_status')}}：{{faceDetail.ufgApprovalStatus==='APPROVED'?$t('cos_app_P'):faceDetail.ufgApprovalStatus==='DECLINED'?$t('approve_status_1'):$t('staus_not_appove')}}</p>
        <p style="color:#DA051F" v-if="faceDetail.ufgApprovalStatus==='DECLINED'">{{$t('refuse_reason')}}：{{faceDetail.ufgApprovalContent?faceDetail.ufgApprovalContent:$t('null')}}</p>
      </div>
      <div class="detail-btnRead">
        <div @click="replaceImg">
          {{faceDetail.ufgApprovalStatus?$t('replacing_facial_photos'):$t('add_facial_photos')}}
        </div>
      </div>
    </div>
    <!-- h5打开摄像机 -->
    <face-camera ref="faceCamera"
     :photoVisible="photoVisible"
     @changeState="changeState" @witnesState='witnesState'>
    </face-camera>
  </div>
</template>

<script>
import avatar from '../../../static/images/avatar.png';
import faceInfoCollection from '@/utils/faceInfo';
import { Image as VanImage } from 'vant';
import faceCamera from '@/components/faceModal/faceCamera';
export default {
    components: {[VanImage.name]: VanImage, faceCamera},
    data() {
        return {
            photoVisible: false,
            srcPath: '',
            srcBase64: '',
            faceDetail: [],
            avatarPng: avatar
        };
    },
    mounted() {
        this.faceDetails();
    },
    methods: {
        backHome() {
            const encIdWb = this.wbEncryptor(window.localStorage.getItem('loginUser'));
            this.$router.push({path: `/personal/${encIdWb}`});
        },
        faceDetails() {
            this.$axios.get('/app/api/trainee/user-face-gather/getDetail').then(res => {
                this.faceDetail = res.data;
            });
        },
        // 更换
        async  replaceImg() {
            const plus = this.$store.state.config.plus ? this.$store.state.config.plus : window.plus;
            const isWechat = /micromessenger/i.test(navigator.userAgent || '');
            if (plus) { // APP人脸采集
                let data = await faceInfoCollection(this);
                if (data.urlBase) {
                    localStorage.setItem('srcBase64', data.urlBase);
                    let replace = this.faceDetail.ufgApprovalStatus ? true : '';
                    this.$router.push({path: '/faceInfo', query: {srcBase64: data.urlBase, srcPath: data.pathSrc, replace: replace}});
                }
            } else if (isWechat) { // 微信公众号采集人脸
                this.$wx.initConfig(['chooseImage', 'getLocalImgData'], location.href.split('#')[0]).then(() => {
                    this.$wx.faceGather().then(res => {
                        if (res.urlBase) {
                            localStorage.setItem('srcBase64', res.urlBase);
                            this.$router.push({path: '/faceInfo', query: {srcPath: res.pathSrc[0], replace: this.faceDetail.ufgApprovalStatus}});
                        }
                    });
                }).catch(err => { // 更换人脸错误信息
                    console.log(err);
                });
            } else { // h5
                this.photoVisible = true;
            }
        },
        // 退出人脸抓拍
        changeState(val) {
            this.photoVisible = false;
        },
        // 拍照完成后关闭和恢复时间
        witnesState(value, url, baseUrl) {
            if (baseUrl) {
                localStorage.setItem('srcBase64', baseUrl);
                let replace = this.faceDetail.ufgApprovalStatus ? true : '';
                this.$router.push({path: '/faceInfo', query: {srcBase64: baseUrl, srcPath: url, replace: replace}});
            }
            this.photoVisible = value;
        }
    },
    beforeDestroy() {
        this.photoVisible = false;
        this.$refs.faceCamera && this.$refs.faceCamera.stopNavigator();
    }
};
</script>
<style>
.prize_box_img .van-image__error-icon{
    font-size: 128px;
}
</style>
<style scoped lang="less">
  .prize_box_img {
    height:280px;
    width:220px;
  }
  .prize_box_img img{
    width: 100%;
    height: 100%;
    margin-top:30px
  }
</style>
